@import "../imports/mixins";

.jw-skin-five {
    @active-color: #000;
    @inactive-color: #464646;
    @hover-color: @active-color;

    @controlbar-background: fade(#eee, 80%);
    @controlbar-height: 2em;
    @controlbar-icon-size: 1em;
    @progress-color: @active-color;
    @buffer-color: #9c9a9d;
    @rail-color: #b8b6b7;
    @thumb-color: @progress-color;
    @volume-background: #333;

    @display-icon-color: @controlbar-background;
    @display-icon-hover-color: #fff;
    @display-bkgd-color: rgba(51, 51, 51, 0.7);
    @display-bkgd-hover-color: #333;

    @cc-inactive: @rail-color;
    @cc-active: @active-color;

    @rail-height: .2em;
    @thumb-size: 1em;
    @cue-height: .4em;
    @rail-vert-gradient: linear-gradient(to bottom, #fff 0, #fff 30%, #333 100%);

    @five-border-radius: 0;

    @controlbar-height: 2em;

    @nextup-header-background: fade(#eee, 90%);
    @nextup-body-background: darken(@nextup-header-background, 10%);
    @nextup-body-text-color: @active-color;
    @nextup-body-text-color-overflow: darken(#eee, 10%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
    #namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();

    .skin-element-padding();
    /* Styles for play button container on idle */
    .jw-display-icon-container {
        border-radius: @five-border-radius;
    }

    /* Styles for menu list items */
    .jw-option {
        color: #bbb;

        &:hover,
        &.jw-active-option {
            color: #fff;
        }
    }

    /* Playlist title */
    .jw-tooltip-title {
        border-bottom: 1px solid #000;
        background-color : #ECECEC;
    }

    /* Slider styles */
    .jw-slider-horizontal {
        background: transparent;

        .jw-slider-container {
            height: .9em;
        }

        .jw-rail,
        .jw-buffer,
        .jw-progress {
            height: @rail-height;
            border-radius: @five-border-radius;
        }

        .jw-rail {
            box-shadow: none;
        }

        .jw-knob {
            .vertically-centered-rail-element(@rail-height, @thumb-size);
            margin: 0;

            background-color: #000;
            border-radius: @five-border-radius;
            width: 1px;
            height: @thumb-size;
        }

        .jw-cue {
            .vertically-centered-rail-element(@rail-height, @cue-height);

            width: .1em;
            height: @cue-height;
            background-color: #000;
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
        }
    }

    .jw-slider-vertical {
        .jw-rail,
        .jw-progress {
            width: @rail-height;
        }

        .jw-progress {
            background: #fff;
        }

        .jw-rail {
            background: #737373;
        }

        .jw-knob {
            margin-bottom: 2px/-2;
            width: .6em;
            height: 2px;
            background: @rail-vert-gradient;
            border-radius: @five-border-radius;
            .horizontally-centered-rail-element(@rail-height, 0.6em);
        }
    }

    /* Five border-radius for the dock, in the upper right corner */
    .jw-dock-button {
        border-radius: @five-border-radius;
    }
}
